import React, { useState } from "react";
import { Popover, Typography, List, Divider, Button } from "antd";
import { useProjects } from "screen/project-list/project";
import styled from "@emotion/styled";
import { ButtonNoPadding } from "./lib";
import { useDispatch } from "react-redux";
import { projectListAction } from "screen/project-list/project-list.store";

export const ProjectPopover = () => {
  const dispatch = useDispatch();

  const { data: projects, isLoading } = useProjects({
    name: "",
    personId: "",
  });
  const content = (
    <ContentContainer>
      <Typography.Text type={"secondary"}>收藏项目</Typography.Text>
      {projects && (
        <List>
          {projects?.map((projects: any) => {
            if (projects?.pin && projects.pin == 1) {
              return (
                <List.Item style={{ padding: "5px" }}>
                  <List.Item.Meta title={projects.name}></List.Item.Meta>
                </List.Item>
              );
            } else {
              return;
            }
          })}
        </List>
      )}
      <Divider style={{ padding: 0, margin: "5px 0" }} />
      <ButtonNoPadding
        type={"link"}
        onClick={() => dispatch(projectListAction.openProjectModal())}
      >
        创建项目
      </ButtonNoPadding>
    </ContentContainer>
  );
  return (
    <Popover placement={"bottom"} content={content}>
      项目
    </Popover>
  );
};
const ContentContainer = styled.div`
  min-width: 30rem;
`;
